import { useEffect, useState } from 'react';

function useLocalStorage(key) {
  // 1.从localStorage中获取数据, 并且数据数据创建组件的state
  const [data, setData] = useState(() => {
    const item = localStorage.getItem(key);

    if (!item) return ""; // 如果localStorage中没有数据, 就返回一个空字符串, 作为state的初始值, 不然JSON.parse反序列化会报错
    if (item) {
      return JSON.parse(item);
    }
  })

  // 2.监听data改变, 一旦发生改变就存储data最新值
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(data));
  }, [key, data])

  return [data, setData];
}

export default useLocalStorage;